<template>
	<view class="num-box">
		<image src="../../../static/image/can.png" @click="action('can')"></image>
		<text>{{ num }}</text>
		<image src="../../../static/image/add.png" @click="action('add')"></image>
	</view>
</template>

<script>
	export default {
		props: {
			dataNum: {
				type: [String, Number],
				default: 1
			},
			min: {
				type: [String, Number],
				default: 1
			}
		},
		data() {
			return {
				num: 1
			}
		},
		watch: {
			dataNum: {
				handler(val) {
					if(val) {
						this.num = val
					}
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			action(type) {
				if(type === 'can') {
					if(this.min != 0 && this.num<=this.min) {
						return uni.showToast({
							title: '此产品最低购买数量' + this.min,
							icon: 'none'
						})
					}
					if(this.num === 1) return
					this.num --
				}  else {
					this.num ++
				}
				this.$emit('nums', this.num)
			}
		}
	}
</script>

<style scoped lang="scss">
.num-box {
	display: flex;
	align-items: center;
	>image {
		width: 36upx;
		height: 36upx;
		flex-shrink: 0;
	}
	>text {
		font-size: 24upx;
		color: #000000;
		font-weight: 400;
		width: 46upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>